<template>
  <el-button type="primary" plain @click="handleAdd">新增目录</el-button>
  <el-table :data="doTableData" style="width: 100%">
    <el-table-column label="id" prop="id" />
    <el-table-column label="分类目录名称" prop="name" />
    <el-table-column label="分类目录级别" prop="type" />
    <el-table-column label="上一级目录id" prop="parentId" />
    <el-table-column label="目录排序" prop="orderNum" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      style="  display: flex;justify-content: center;"
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="tableData.length"
      @current-change="handleCurrentChange"/>
  <el-dialog v-model="dialogVisible" title="更新目录" draggable>
   <el-form :model="doDataInfo" label-width="80px">
         <el-form-item label="目录名称" size="mini">
           <el-input v-model="doDataInfo.name"/>
         </el-form-item>
         <el-form-item   label="目录级别" size="mini">
           <el-input v-model="doDataInfo.type"/>
         </el-form-item>
         <el-form-item  label="上一级目录id" size="mini">
           <el-input v-model="doDataInfo.parentId"/>
         </el-form-item>
         <el-form-item  label="目录排序" size="mini">
           <el-input v-model="doDataInfo.orderNum"/>
         </el-form-item>
   </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateInfo">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="deleteVisible" title="删除目录" draggable>
    <span>是否删除该目录？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteInfo">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="addVisible" title="新增目录" draggable>
    <el-form :model="addDataInfo" label-width="80px">
      <el-form-item label="目录名称" size="mini">
        <el-input v-model="addDataInfo.name"/>
      </el-form-item>
      <el-form-item   label="目录级别" size="mini">
        <el-input v-model="addDataInfo.type"/>
      </el-form-item>
      <el-form-item  label="上一级目录id" size="mini">
        <el-input v-model="addDataInfo.parentId"/>
      </el-form-item>
      <el-form-item  label="目录排序" size="mini">
        <el-input v-model="addDataInfo.orderNum"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addInfo">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ref, getCurrentInstance, onMounted, reactive, computed} from 'vue'
import {reqCategoryAddInfo, reqCategoryDeleteInfo, reqCategoryFindAll, reqCategoryUpdateInfo} from "@/api";
import {ElMessage} from "element-plus";
export default {
name: "AdminCategory",
  setup(){
    const {proxy}=getCurrentInstance()
    const tableData=ref([])
    const doDataInfo=reactive({})
    const handleEdit=(index,row)=>{
      proxy.dialogVisible=true
      doDataInfo.id=row.id
      doDataInfo.name=row.name
      doDataInfo.orderNum=row.orderNum
      doDataInfo.parentId=row.parentId
      doDataInfo.type=row.type
    }
    /**
     * 更新商品
     * @returns {Promise<void>}
     */
    const updateInfo=async ()=>{
      const result=await reqCategoryUpdateInfo(doDataInfo)
      if (result.status===10000){
        ElMessage.success('更新成功')
        proxy.dialogVisible=false
        await findAll()
      }else {
        proxy.dialogVisible=false
        ElMessage.error('系统异常')
      }
    }
    const handleDelete=(index,row)=>{
      proxy.deleteVisible=true
      proxy.deleteId=row.id
    }
    /**
     * 删除目录
     * @returns {Promise<void>}
     */
    const deleteId=ref()
    const deleteInfo=async ()=>{
      const result=await reqCategoryDeleteInfo(proxy.deleteId)
      if (result.status===10000){
        ElMessage.success('删除成功')
        proxy.deleteVisible=false
        await findAll()
      }else {
        proxy.deleteVisible=false
        ElMessage.error('系统异常')
      }
    }
    const handleAdd=()=>{
      proxy.addVisible=true
    }
    const addDataInfo=reactive({})
    /**
     * 增加目录
     * @returns {Promise<void>}
     */
    const addInfo=async ()=>{
      const result=await reqCategoryAddInfo(addDataInfo)
      if (result.status===10000){
        ElMessage.success('新增成功')
        proxy.addVisible=false
        await findAll()
      }else {
        proxy.addVisible=false
        ElMessage.error('系统异常')
      }
    }
    const findAll=async ()=>{
        const result=await reqCategoryFindAll()
      if (result.status===10000){
        proxy.tableData=result.data
      }else {
        ElMessage.success('系统异常')
      }
    }
    /**
     * 分页变量
     */
    const pageSize=ref(10)
    const currentPage=ref(1)
    const handleCurrentChange=(val)=>{
      proxy.currentPage=val
    }
    const doTableData=computed(()=>{
        return proxy.tableData.slice((proxy.currentPage-1)*proxy.pageSize,proxy.currentPage*proxy.pageSize)
    })
    onMounted(()=>{
      findAll()
    })
    const dialogVisible = ref(false)
    const deleteVisible = ref(false)
    const addVisible = ref(false)
    return{tableData,
      handleDelete,
      handleEdit,
      dialogVisible,
      doDataInfo,
      updateInfo,
      deleteVisible,
      deleteInfo,
      addVisible,
      addDataInfo,
      handleAdd,
      addInfo,
      pageSize,
      currentPage,
      handleCurrentChange,
      doTableData
    }
  }
}
</script>

<style scoped>

</style>
